<template>
  <div class="handle">
    <div class="typearea">
      <!-- 左边列表 -->
      <Sort />
      <!-- 右边主内容 -->
      <Singer />
    </div>
    <!-- 回到顶部按钮 -->
    <button class="toproof" @click="backTop" v-if="btnFlag">
      <span>^</span>
      <span> TOP</span>
    </button>
  </div>
</template>
<script>
import Singer from './Ented/Singer'
import Sort from '../components/Sort'
export default {
  name: 'artist',
  data() {
    return {
      // 默认按钮不显示
      btnFlag: false,
      // 默认高度为0
      scrollTop: 0
    }
  },
  // window对象，所有浏览器都支持window对象。它表示浏览器窗口，监听滚动事件
  mounted() {
    window.addEventListener('scroll', this.scrollToTop)
  },
  destroyed() {
    window.removeEventListener('scroll', this.scrollToTop)
  },
  methods: {
    // 点击按钮回到顶部方法，加计时器是为了过渡顺滑
    backTop() {
      const that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },
    // 计算距离顶部的高度，当高度大于10显示回顶部图标，小于10则隐藏
    scrollToTop() {
      const that = this
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      that.scrollTop = scrollTop
      if (that.scrollTop > 10) {
        that.btnFlag = true
      } else {
        that.btnFlag = false
      }
    }
  },
  components: {
    Singer,
    Sort
  }
}
</script>
<style lang="less">
.handle {
  height: 100%;
  margin: 0;
  padding: 0;
}
.typearea {
  width: 982px;
  margin: 0 auto;
  overflow: hidden;
  // border: 1px solid red;
}
// 回到顶部按钮的样式
.toproof {
  height: 50px;
  width: 50px;
  position: fixed;
  right: 210px;
  bottom: 70px;
  display: flex;
  display: block;
  flex-flow: row wrap;
  justify-content: space-between;
}
.listleft {
  float: left;
  width: 180px;
  height:100%;
  border-left: 1px solid #e8e8e8;
}
.listright {
  float: right;
  width: 799px;
  border-left: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  padding-top: 40px;
}
.handlelinege {
  font-size: 34px;
  font-weight: normal;
  padding-bottom: 10px;
}
.thefirstrow {
  padding: 0 40px;
}
.handleline {
  text-align: left;
  display: inline-block;
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #c20c0c;
  margin: 0;
}
.more {
  font-size: 12px;
  line-height: 40px;
  font-weight: normal;
  padding-top: 20px;
}
.imagebox {
  padding: 0;
  margin: 0;
  padding-top: 14px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
.imageimage {
  width: 130px;
  height: 130px;
  margin: 0;
  padding: 0;
}
.imagemao {
  width: 100%;
  height: 100%;
}
.image {
  width: 739px;
}
.el-icon-user {
  width: 17px;
  height: 18px;
  font-size: 12px;
  text-align: center;
  line-height: 18px !important;
  border-radius: 50%;
  background: red;
  color: #fff;
}
.imagenamename {
  font-size: 12px;
  color: black;
  text-decoration: none;
}
.imagename {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}
.handleul {
  width: 160px;
  margin: 0 auto;
}
// h2的类名
.tit {
  height: 25px;
  font-size: 16px;
  text-align: left;
  margin: 0 auto;
  padding-left: 14px;
  padding-top: 55px;
}
.navli {
  width: 120px;
  text-align: left;
  padding-bottom: 8px;
  list-style-position: inside;
  padding-left: 15px;
  list-style-type: square;
  font-size: 12px;
  border: 1px solid #ccc;
  border: hidden;
}
.navLi {
  width: 120px;
  text-align: left;
  padding-bottom: 8px;
  list-style-position: inside;
  padding-left: 15px;
  list-style-type: square;
  font-size: 12px;
  border: 1px solid #ccc;
  border: hidden;
}
.imagebox li {
  height: 144px;
  text-align: left;
  padding: 0 17px 30px 0;
  overflow: hidden;
  list-style-type: square;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
.ulliBOx {
  width: 160px;
  text-align: left;
  margin: 0 auto;
  margin-top: 20px;
  border-top: 1px solid #ccc;
}
.tith {
  padding-left: 15px;
  padding-top: 20px;
}
.nav {
  padding-top: 10px;
}
.navli a {
  color: black;
  text-decoration: none;
}
.navLi a {
  color: black;
  text-decoration: none;
}
.navli::marker {
  color: #ccc;
}
.navLi::marker {
  color: #ccc;
}
.navli.active::marker {
  color: red;
}
.navLi.active::marker {
  color: red;
}
.navli.active a {
  color: red !important;
}
.navli.active a:hover {
  text-decoration: none;
}
.navLi.active a:hover {
  text-decoration: none;
}
.navli.active {
  border: 1px solid #ccc;
}
.navLi.active {
  border: 1px solid #ccc;
}
.navLi.active a {
  color: red !important;
}
.clackanniu {
  text-decoration: none;
}
.starname {
  width: 719px;
  margin: 0 auto;
  display: flex;
  padding-top: 10px;
  // border-top: 1px dotted #ccc;
  justify-content: space-around;
  text-align: left;
}
.difirstlineyige ul {
  list-style-type: none;
  text-align: left;
  padding: 10px 0;
  margin-right: 40px;
}
.namehome {
  color: black;
  text-decoration: none;
  font-size: 12px;
}
.difirstlineyige li {
  margin-bottom: 10px;
}
</style>
